<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        body {
            background-image: url("/img/bb.jpg");
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 380px;
            background-color: rgba(33, 99, 252, 0.3);
            box-shadow: 7px 7px 17px rgba(60, 106, 199, 0.5);
            border-radius: 5px;
        }


        p {
            margin-top: 30px;
            margin-left: 20px;
        }

        #username {
            width: 200px;
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            outline: none;
            padding-left: 10px;
        }

        #password {
            width: 202px;
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            outline: none;
            padding-left: 10px;
        }


        #loginMsg {
            text-align: center;

        }
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        #subDiv {
            text-align: center;
            margin-top: 30px;
        }


    </style>

</head>
<body>
    <div id="loginDiv" style="height: 350px">
        <form method="post" action="#" id="form">
            <h1 id="loginMsg">登&nbsp;&nbsp;&nbsp;录</h1>
            <p>用户名: <input id="username" name="loginId" type="text"></p>
            <p>密 &nbsp;&nbsp;码: <input id="password" name="password" type="password"></p>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="1" id="defaultCheck1" name="checkbox">
                <label class="form-check-label" for="defaultCheck1">
                    记住我
                </label>
            </div>

            <div id="subDiv">
                &nbsp;&nbsp;&nbsp;<input type="button" class="button" id="loginBtn" value="登录"/>
            </div>
        </form>
    </div>

<script>


    $(function (){
        $("#loginBtn").click(function (){
            $.ajax({
                type:"post",
                contentType:"application/json",
                data:JSON.stringify({
                    loginId:$("#username").val(),
                    password:$("#password").val(),
                    checkbox:$("#defaultCheck1").val()
                }),
                url:"/login",
                success:function (data){
                    if (data){
                        window.location.href="/index.html";
                    }else {
                        alert("用户或密码错误");
                    }
                }
            })
        })
    })

</script>


</body>
</html>